<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-12-01 15:41:50
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-12-01 15:51:58
 * @FilePath: \vue-openlayers\src\views\function\function1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <h3 class="h3">比例尺控件</h3>
    <div
      id="vue-openlayers"
      class="map-x"
    />
  </div>
</template>
<script>
import 'ol/ol.css'
import {
  Map,
  View
} from 'ol'
import Tile from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import * as control from 'ol/control'

export default {
  name: 'Zoom',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://{a-c}.tile.openstreetmap.de/{z}/{x}/{y}.png'
            })
          })
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [114.064839, 22.548857],
          zoom: 4
        }),
        // 以下代码块为主要的关注点
        controls: control.defaults({
          zoom: false,
          doubleClickZoom: false,
          rotate: false,
          attribution: false
        }).extend([
          new control.ScaleLine({
            units: 'metric'
            // 单位包括：degrees：度数；imperial：imperial inch；us：us incn；nautical：nautical mile；metric：千米
          })
        ])
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 1240px;
  height: 690px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
.h3 {
  text-align: center;
}
</style>

